<?php $member_account = $this->Session->read('member_account'); ?>

<div class="modal-over" id="unlock_screen">
    <div class="modal-center animated flipInX" style="width:400px;margin: -100px 0 0 -150px;">
        <form action="<?php echo $this->Html->url(array('controller' => 'member', 'action' => 'org_login')); ?>" method="post">
            <?php
            $logo_url = isset($member_account['Member']['MemberImage'][0]['thumb_url']) ? $member_account['Member']['MemberImage'][0]['thumb_url'] : 'avatar_default.jpg';
            ?>
            
            <div class='block text-white font-bold p text-center' style='color: #ffd;'>
                Account authentication required
            </div>
            <div class="pull-left thumb m-r"><?php echo $this->Html->image( $logo_url, array('class' => 'img-thumbnail')); ?></div>
            <div class="clear">
                <p class="text-white"><?php echo $member_account['Member']['first_name'] . " " . $member_account['Member']['last_name']; ?></p>
                <div class="pull-left input-group input-s-lg">
                    <input type="password" id="password" class="form-control text-sm" placeholder="Enter Password to Continue">
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="submit" id="unlock_btn" ><i class="fa fa-arrow-right"></i></button>
                        <input type="hidden" name="username" value="<?php echo $member_account['MemberAccount']['username']; ?>" id="username" />
                        <input type='hidden' id='org_slug' name='org_slug' value='<?php echo $org_slug; ?>' />
                        <input type='hidden' id='manage_url' value='<?php echo $this->Html->url("/organisation/manage/{$org_slug}"); ?>' />
                    </span>
                </div>
                
                <span class='pull-left m-l-sm'>
                    <button class="btn btn-danger m-l-xs" data-toggle='ajaxModal' id='org-login-modal-hide' type="button" ><i class="fa fa-times"></i></button>
                </span>
            </div>
        </form>
    </div>
</div>

<script>
    // data-dismiss="modal"
    $(document).ready(function() {
        $("#org-login-modal-hide").click(function() {
            $('#ajaxModal').fadeOut();
            $('.modal-backdrop').removeClass('in').hide();
        });
        
        $(".modal-center form").submit(function(e) {
            e.preventDefault();
            
            var mc = $('.modal-over .modal-center').removeClass().addClass("modal-center animated");
            var url = $(this).attr('action');
            var params = {
                username: $("#unlock_screen #username").val(),
                password: $("#unlock_screen #password").val(),
                org_slug: $("#unlock_screen #org_slug").val()
            };
            
            if( params['password'] == '' ) {
                mc.addClass("shake");
                $("#unlock_btn").removeClass("btn-warning").addClass("btn-danger");
                
                return;
            }
            
            $("#unlock_btn i").removeClass("fa-arrow-right").addClass("fa-spinner");
            $("#unlock_btn").removeClass("btn-success btn-danger").addClass("btn-warning");

            $.post(url, params, function(res) {
                if (res.status === 'success' && res.valid ) {
                    mc.addClass("flipOutX");
                    
                    setTimeout(function() {
                        $("#ajaxModal, .modal-backdrop").fadeOut();
                    }, 300);
                    
                    $("#unlock_btn").removeClass("btn-warning").addClass("btn-success");
                    
                    App.notify('unlockScreen');
                    
                    window.location.href = $("#manage_url").val() + "/" + res.check_hash;
                }

                else {
                    mc.addClass("shake");
                    $("#unlock_btn").removeClass("btn-warning").addClass("btn-danger");
                }
                
                $("#unlock_btn i").removeClass("fa-spinner").addClass("fa-arrow-right");
            }, 'json');
        });
    });
</script>